<template>
    <div class="main-container">
        <div style="background-color: #fff;height:100%" id="ProductManagement">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify :default-active-key="pageData.tableIndex">
                <a-tab-pane title="原料列表" key="1" v-if="permissionStore.hasPermisson('cpgy.yllb')">
                    <div style="height: 100%;">
                        <RawMaterialsList></RawMaterialsList>
                    </div>
                </a-tab-pane>
                <!-- <a-tab-pane title="物料列表" key="2">
                        <div style="height: 100%;">
                            <MaterialListVue></MaterialListVue>
                        </div>
                </a-tab-pane> -->
                <a-tab-pane title="商品资料列表" key="2" v-if="permissionStore.hasPermisson('cpgy.spzllb')">
                    <div style="height: 100%;">
                        <ProductDataList></ProductDataList>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="坯布列表" key="3" v-if="permissionStore.hasPermisson('cpgy.pblb')">
                    <div style="height: 100%;">
                        <EmbroideryList></EmbroideryList>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">

import { defineComponent, reactive } from 'vue'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'
import { useRoute } from 'vue-router'

export default defineComponent({
    name: 'ProductManagement',
    setup() {
        const route = useRoute()
        console.log(route.query.key)
        const pageData = reactive({
            tableIndex: "1"
        })

        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
        };
        const permissionStore = usePermission()
        return {
            pageData,
            tabsChange,
            permissionStore
        }
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>